<template>
  <div :class="prefixCls" :style="styles">
    <slot></slot>
  </div>
</template>
<script>
const prefixCls = 'ivu-carousel-item';

export default {
  componentName: 'carousel-item',
  name: 'CarouselItem',
  data() {
    return {
      prefixCls: prefixCls,
      width: 0,
      height: 'auto',
      left: 0
    };
  },
  computed: {
    styles() {
      return {
        width: `${this.width}px`,
        height: `${this.height}`,
        left: `${this.left}px`
      };
    }
  },
  mounted() {
    this.$parent.slotChange();
  },
  watch: {
    width(val) {
      if (val && this.$parent.loop) {
        this.$nextTick(() => {
          this.$parent.initCopyTrackDom();
        });
      }
    },
    height(val) {
      if (val && this.$parent.loop) {
        this.$nextTick(() => {
          this.$parent.initCopyTrackDom();
        });
      }
    }
  },
  beforeDestroy() {
    this.$parent.slotChange();
  }
};
</script>
